<template>
  <div class="breeding-ent-container">
    <!-- 头部信息 -->
    <div class="header-info">
      <h2>养殖企业管理平台</h2>
      <div class="user-info">
        <span>欢迎，{{ userInfo?.name }}</span>
        <el-button type="primary" link @click="showUpdatePassword = true">修改密码</el-button>
        <el-button type="danger" link @click="handleLogout">退出登录</el-button>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="function-menu">
      <el-card class="menu-card">
        <template #header>
          <div class="card-header">
            <span>功能菜单</span>
          </div>
        </template>
        <div class="menu-buttons">
          <el-button type="primary" @click="activeTab = 'createBatch'">新建产品批号</el-button>
          <el-button type="success" @click="activeTab = 'batchList'">产品批号管理</el-button>
          <el-button type="warning" @click="activeTab = 'confirmList'">下游企业进场确认</el-button>
        </div>
      </el-card>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 创建产品批号 -->
      <div v-if="activeTab === 'createBatch'" class="tab-content">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>新建产品批号</span>
            </div>
          </template>
          <el-form
            ref="createFormRef"
            :model="createForm"
            :rules="createRules"
            label-width="120px"
          >
            <el-form-item label="产品批号" prop="batchNumber">
              <el-input
                v-model="createForm.batchNumber"
                placeholder="请输入产品批号"
                @blur="checkBatchNumber"
              />
            </el-form-item>
            <el-form-item label="产品品种" prop="breed">
              <el-input
                v-model="createForm.breed"
                placeholder="请输入产品品种"
              />
            </el-form-item>
            <el-form-item label="检疫合格证" prop="animalQuarantineCertificate">
              <el-input
                v-model="createForm.animalQuarantineCertificate"
                placeholder="请输入动物检疫合格证编号"
              />
            </el-form-item>
            <el-form-item label="官方检疫员" prop="officialInspector">
              <el-input
                v-model="createForm.officialInspector"
                placeholder="请输入官方检疫员名称"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleCreateBatch">创建</el-button>
              <el-button @click="resetCreateForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 产品批号列表 -->
      <div v-if="activeTab === 'batchList'" class="tab-content">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>产品批号管理</span>
              <div>
                <el-radio-group v-model="batchStatus" @change="loadBatchList">
                  <el-radio-button label="DRAFT">待发布</el-radio-button>
                  <el-radio-button label="PUBLISHED">已发布</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>

          <el-table
            :data="batchList"
            v-loading="batchLoading"
            style="width: 100%"
          >
            <el-table-column prop="batchNumber" label="产品批号" width="180" />
            <el-table-column prop="breed" label="产品品种" width="120" />
            <el-table-column prop="animalQuarantineCertificate" label="检疫合格证" width="180" />
            <el-table-column prop="officialInspector" label="官方检疫员" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusTagType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column label="操作" width="200">
              <template #default="scope">
                <div v-if="batchStatus === 'DRAFT'">
                  <el-button size="small" @click="handleEditBatch(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="handleDeleteBatch(scope.row)">删除</el-button>
                </div>
                <div v-else>
                  <el-button size="small" @click="handleViewDetail(scope.row)">查看详情</el-button>
                  <el-button size="small" type="warning" @click="handleOfflineBatch(scope.row)">下架</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="batchPage.current"
              v-model:page-size="batchPage.size"
              :total="batchPage.total"
              :page-sizes="[10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>

      <!-- 下游企业进场确认 -->
      <div v-if="activeTab === 'confirmList'" class="tab-content">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>下游企业进场确认</span>
              <div>
                <el-input
                  v-model="searchBatchNumber"
                  placeholder="搜索产品批号"
                  style="width: 200px"
                  @keyup.enter="loadPendingRecords"
                >
                  <template #append>
                    <el-button @click="loadPendingRecords">搜索</el-button>
                  </template>
                </el-input>
              </div>
            </div>
          </template>

          <el-table
            :data="pendingRecords"
            v-loading="recordLoading"
            style="width: 100%"
          >
            <el-table-column prop="productBatchNumber" label="产品批号" width="180" />
            <el-table-column prop="breed" label="产品品种" width="120" />
            <el-table-column prop="toCompanyName" label="屠宰企业" width="180" />
            <el-table-column prop="createTime" label="申请时间" width="180" />
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleConfirmRecord(scope.row)">
                  确认
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="recordPage.current"
              v-model:page-size="recordPage.size"
              :total="recordPage.total"
              :page-sizes="[10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleRecordSizeChange"
              @current-change="handleRecordCurrentChange"
            />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 编辑产品批号对话框 -->
    <el-dialog
      v-model="showEditDialog"
      title="编辑产品批号"
      width="500px"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        label-width="120px"
      >
        <el-form-item label="产品批号">
          <el-input v-model="editForm.batchNumber" disabled />
        </el-form-item>
        <el-form-item label="产品品种" prop="breed">
          <el-input v-model="editForm.breed" />
        </el-form-item>
        <el-form-item label="检疫合格证" prop="animalQuarantineCertificate">
          <el-input v-model="editForm.animalQuarantineCertificate" />
        </el-form-item>
        <el-form-item label="官方检疫员" prop="officialInspector">
          <el-input v-model="editForm.officialInspector" />
        </el-form-item>
        <el-form-item label="是否发布">
          <el-checkbox v-model="editForm.publish">发布产品</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEditDialog = false">取消</el-button>
          <el-button type="primary" @click="handleUpdateBatch">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="showUpdatePassword"
      title="修改密码"
      width="400px"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="100px"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showUpdatePassword = false">取消</el-button>
          <el-button type="primary" @click="handleUpdatePassword">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

</script>

<style scoped>
.breeding-ent-container {
  padding: 20px;
}

.header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.header-info h2 {
  margin: 0;
  color: #303133;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.function-menu {
  margin-bottom: 20px;
}

.menu-buttons {
  display: flex;
  gap: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-content {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>